<template>
	<view>
		<u-navbar :leftIconColor="leftIconColor" :titleStyle="{color: titleColor}" :bgColor="bgColor" :title="title" :autoBack="true" :placeholder="false">
		</u-navbar>
		<scroll-view @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight}">
			<u--image mode="aspectFill" :src="detail.image[0].url" width="100%" height="220"></u--image>
			<view class="scenic-area">
				<view style="display: flex;align-items: center;">
					<HomeTitle :title="detail.name || ''"/>
					<view style="width: 16rpx;"/>
					<u-icon @click="showAudio = true" name="volume-fill" :color="appColor" size="22"></u-icon>
				</view>
				<view style="height: 32rpx;"/>
				<view class="scenic-area-address" @click="openMap">
					<text :style="{color: appColor}" class="iconfont icon-daohangdizhi"></text>
					<text class="scenic-area-content">{{detail.address || ''}}</text>
				</view>
				<view class="scenic-area-phone" @click="toPhone">
					<text :style="{color: appColor}" class="iconfont icon-dianhua"></text>
					<text class="scenic-area-content">{{detail.telephone || ''}}</text>
				</view>
				<view style="height: 32rpx;"/>
				<view class="scenic-area-diamond">
					<view class="scenic-area-diamond-item" @click="toDetail(item)" v-for="(item, index) in diamondList" :key="index">
						<text :style="{color: appColor}" :class="['iconfont', item.icon]"></text>
						<text class="scenic-area-diamond-text">{{item.title}}</text>
					</view>
				</view>
				<view style="height: 48rpx;"/>
				<u-parse :content="detail.introduce || ''"></u-parse>
			</view>
		</scroll-view>
		<u-popup :overlayOpacity="0.1" closeable :closeOnClickOverlay="false" :show="showAudio" @close="closeAudio" :round="10">
			<view style="height: 64rpx;"></view>
			<view style="padding: 32rpx;">
				<audio style="text-align: left;" :src="detail.voice" :poster="detail.voiceCover" author="花儿朵朵" name="景区介绍" :action="audioAction" controls></audio>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import {survey} from '@/api/home.js';
	import HomeTitle from '@/components/homeTitle';
	export default {
		components: {
			HomeTitle
		},
		data() {
			return {
				showAudio: false,
				titleColor: '#fff',
				bgColor: 'transparent',
				leftIconColor: '#fff',
				title: ' ',
				diamondList: [
					{title: '票务政策', icon: 'icon-menpiao', url: ''},
					{title: '开园时间', icon: 'icon-shijian', url: ''},
					{title: '地理交通', icon: 'icon-jiaotong', url: ''},
					{title: '游览须知', icon: 'icon-zhengcezhinan_l', url: ''},
					{title: '防疫政策', icon: 'icon-jiazhengfuwu-07', url: ''},
				],
				content: '<p>分点积分卡积分点积分卡积分</p>',
				detail: {},
				audioAction: {
					method: 'pause'
				}
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215';
			},
			scrollViewHeight() {
				return this.scrollHeight + this.statusBarHeight + 'px';
			},
		},
		methods: {
			...mapActions(['setDetail']),
			toPhone() {
				const {telephone: phoneNumber} = this.detail
				uni.makePhoneCall({
					phoneNumber
				})
			},
			closeAudio() {
				this.showAudio = false;
			},
			openMap() {
				const [latitude, longitude] = this.detail.latLng.split(',');
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude)
				})
			},
			handleScroll({detail}) {
				if (detail.scrollTop > 100) {
					this.titleColor = '#000';
					this.bgColor = '#fff';
					this.leftIconColor = '#000';
					this.title = '概况';
				} else {
					this.titleColor = '#fff';
					this.bgColor = 'transparent';
					this.leftIconColor = '#fff';
					this.title = ' ';
				}
			},
			toDetail(item) {
				let detail = {};
				if(item.title === '票务政策') {
					detail = {title: '票务政策', content: this.detail.ticketingPolicy}
					this.setDetail({detail});
				} else if (item.title === '开园时间') {
					detail = {title: '开园时间', content: this.detail.openingHours};
					this.setDetail({detail});
				} else if (item.title === '地理交通') {
					detail = {title: '地理交通', content: this.detail.geographicTraffic}
					this.setDetail({detail});
				} else if (item.title === '游览须知') {
					detail = {title: '游览须知', content: this.detail.guidelines}
					this.setDetail({detail});
				} else if (item.title === '防疫政策') {
					detail = {title: '防疫政策', content: this.detail.policy}
					this.setDetail({detail});
				}
				uni.navigateTo({
					url: '/pageDiamond1/scenicArea/scenicAreaDetail'
				})
			}
		},
		onLoad() {
			survey().then(res => {
				this.detail = res.result;
			})
		}
	}
</script>


<style>
	audio {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	.scenic-area {
		padding: 32rpx;
		background-color: #fff;
		position: relative;
		top: -32rpx;
		border-radius: 16rpx 16rpx 0 0;
		
		.scenic-area-address, .scenic-area-phone {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
			.iconfont {
				font-size: 32rpx;
			}
			.scenic-area-content {
				padding-left: 16rpx;
			}
		}
		
		.scenic-area-diamond {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.scenic-area-diamond-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.iconfont {
					font-size: 56rpx;
					font-weight: bold;
				}
				.scenic-area-diamond-text {
					color: #333;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
